import {useState,useEffect} from 'react'

export default function App2() {
    const [num,setNum]=useState(1)
    const [num1,setNum1]=useState(1)
    
    //模拟mounted,一般在这个位置写ajax
    //  useEffect(()=>{
    //  console.log("挂载完成")
    //  })

    //模拟updated，检测数据更新，检测哪个数据更新，就把这个变量填写到数组中
    //检测数据更新，检测哪个数据更新，就把这个变量填写到数组中
    //当要检测的是页面中所有的变量，你有两个选择，一是把所有变量都填写到数组中，二是直接删掉数组
    //当不想检测页面中任何数据的更新，可以直接给个空数组


    // 监听
    // useEffect(() => {
    //   console.log(111);
    // }, [num1])


    // 模拟beforDestory 处理脏数据  垃圾回收
    useEffect(()=>{
        return ()=>{
            console.log('销毁后')
        }
    })
  return (
    <div>
        <h2>{num}</h2>
        <button onClick={()=>setNum(num+1)}>累加</button>
        <hr />
        <h2>{num1}</h2>
        <button onClick={()=>setNum1(num1+1)}>累加</button>
    </div>
  )
}
